<template>
	<view class="content">
		<view class="group">
			<view class="group_pic">
				<view class="appraise" v-if="pics.length != 0" v-for="(item,index) in pics" :key="index">
					<image class="upload" :src="item" mode=""></image>
					<image class="closeUpload" @click="closePic(index)" src="https://taobaoke-paimai.oss-cn-beijing.aliyuncs.com/close.png" mode=""></image>
				</view>
				<view class="appraise">
					<image class="upload" src="https://taobaoke-paimai.oss-cn-beijing.aliyuncs.com/upload.png" mode="" @click="upload"></image>
				</view>
			</view>
			<view class="group_txt">
				<textarea  placeholder="为商品写些评价吧，让我们做的更好" v-model="content" class="text-area" placeholder-class="pla" @input="goInput" />
				<view class="text_num">{{textLength}}/400</view>
			</view>
			<view class="group_star">
				<view class="star_name">评价商品</view>
				<view class="star">
					<tui-rate :current="index" normal="#DBDBDB" active="#C7973B" :size="22"  @change="change"></tui-rate>
				</view>
			</view>
			
		</view>
		<view class="formbtn" @click="pickUp">发布</view>
	</view>
</template>

<script>
	import urlConfig from '../../../../../common/api/config.js'
	export default {
		data() {
			return {
				content:'',
				textLength:0,
				index:0,
				pics:[],
				unique:''
			}
		},
		onLoad(options) {
			console.log(options)
			if (Object.keys(options).length != 0) {
				this.unique = options.unique;
			}
		},
		methods: {
			// 删除上传图片
			closePic: function (index) {
				this.pics.splice(index,1)
			},
			// 改变星星数量
			change: function (e) {
				console.log(e)
				this.index = e.index
			},
			// 
			goInput: function (e) {
				console.log(e)
				this.textLength = e.detail.cursor;
			},
			// 上传照片
			upload: function () {
				let that = this;
				uni.chooseImage({
				    count: 1, //默认9
				    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				    sourceType: ['album','camera'], //从相册选择
				    success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.uploadFile({
							url: urlConfig + 'uploadService', //接口地址
							filePath: tempFilePaths[0],
							name: 'file',
							success: (res) => {
								console.log(res); 
								var data = JSON.parse(res.data);
								console.log(data,"======")
								that.pics.push(data.data.data);
							}
						});
					}
				});	
			},
			pickUp: function () {
				let that = this;
				if (that.content == '') {
					that.tui.toast('请输入商品评论');
					return;
				} else if (that.index == 0) {
					that.tui.toast('请对商品进行评分');
					return;
				}
				that.api.getGoodsAppraise({
					comment:that.content,
					pics:that.pics.join(","),
					productScore:that.index,
					unique:that.unique
				}).then(res => {
					console.log(res)
					that.tui.toast(res.data);
					setTimeout(function () {
						uni.$emit('myOrder',{msg:'页面更新'});
						uni.$emit('myOrderDetail',{msg:'页面更新'});
						uni.navigateBack({
							delta: 1
						});
					},500)
					
				})
				
				
			}
			
			
			
			
			
			
			
			
		}
	}
</script>

<style lang="less">
	page {
		width: 100%;
		box-sizing: border-box;
		letter-spacing: 3rpx;
		background: #FFFFFF;
		font-family: 'PingFang SC';
		font-size: 28rpx;
		color: #333333;
		padding: 0 20rpx;
	}
	.content {
		width: 100%;
		box-sizing: border-box;
	}
	.group {
		width: 100%;
		box-sizing: border-box;
		.group_pic {
			width: 100%;
			box-sizing: border-box;
			padding: 40rpx 0 20rpx 0;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			flex-flow: wrap;
			.appraise {
				width: 143rpx;
				height: 143rpx;
				margin: 0 20rpx 15rpx 0;
				position: relative;
				.upload {
					width: 100%;
					height: 100%;
					border-radius: 4rpx;
				}
				.closeUpload {
					width: 40rpx;
					height: 40rpx;
					position: absolute;
					top: -10rpx;
					right: -10rpx;
					z-index: 10;
				}
			}
			
		}
		.group_txt {
			width: 100%;
			box-sizing: border-box;
			height: 200rpx;
			border-bottom: 1rpx solid #F8F8F8;
			.text-area {
				width: 100%;
				box-sizing: border-box;
				height: 160rpx;
				padding: 10rpx;
			}
			.pla {
				font-size: 23rpx;
				color: #999999;
			}
			.text_num {
				font-size: 20rpx;
				color: #333333;
				text-align: right;
				line-height: 30rpx;
			}
		}
		.group_star {
			width: 100%;
			box-sizing: border-box;
			padding: 30rpx 0;
			line-height: 50rpx;
			border-bottom: 1rpx solid #F8F8F8;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			.star_name {
				width: 140rpx;
				box-sizing: border-box;
			}
			
		}
		
	}
	.formbtn {
		width: 650rpx;
		box-sizing: border-box;
		text-align: center;
		font-size: 30rpx;
		color: #FFFFFF;
		background: #E42221;
		border-radius: 8rpx;
		line-height: 94rpx;
		margin: 96rpx auto 0 auto;
	}
	
	
	

</style>
